<template>
  <div id="card_demo1">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(g, index) in goodsAry" :key="g.id" style="padding-bottom: 20px;">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="g.img"
               class="image">
          <div style="padding: 14px;">
            <span>{{g.name}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodsAry: [
        {id: 1, name: 'aa1', img: require('@/assets/goods_imgs/1.jpg'), price: 100},
        {id: 2, name: 'aa2', img: require('@/assets/goods_imgs/2.jpg'), price: 200},
        {id: 3, name: 'aa3', img: require('@/assets/goods_imgs/3.jpg'), price: 300},
        {id: 4, name: 'aa4', img: require('@/assets/goods_imgs/4.jpg'), price: 400},
        {id: 5, name: 'aa5', img: require('@/assets/goods_imgs/5.jpg'), price: 500},
        {id: 6, name: 'aa6', img: require('@/assets/goods_imgs/6.jpg'), price: 600},
        {id: 7, name: 'aa7', img: require('@/assets/goods_imgs/7.jpg'), price: 700},
        {id: 8, name: 'aa8', img: require('@/assets/goods_imgs/8.jpg'), price: 800},
        {id: 9, name: 'aa9', img: require('@/assets/goods_imgs/9.jpg'), price: 900},
        {id: 10, name: 'aa9', img: require('@/assets/goods_imgs/10.jpg'), price: 900},
        {id: 11, name: 'aa9', img: require('@/assets/goods_imgs/11.jpg'), price: 900},
        {id: 12, name: 'aa9', img: require('@/assets/goods_imgs/12.jpg'), price: 900}
      ],
      currentDate: new Date()
    };
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 300px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
